<template>
 <div class="calculator-border">
        <div class="calculator-display">
          <div class="calculator-formula" v-cloak>{{ formula }}</div>
          <div class="calculator-result" v-cloak>{{ result }}</div>
        </div>
            
          <div class="calculator-items">
          <div class="calculator-row-1">
     
          <div class="calculator-item color" @click="cleanAll()">C</div>
          <div class="calculator-item colot" @click="toggle()">+/-</div>
          <div class="calculator-item colot" @click="operate('/')">%</div>
         
           <div class="calculator-item color " style="flex:1.5" @click="drop()">←</div>
          </div>
                
           <div class="calculator-row-2">
          <div class="calculator-item" @click="operate(7)">7</div>
          <div class="calculator-item" @click="operate(8)">8</div>
          <div class="calculator-item" @click="operate(9)">9</div>
           <div class="calculator-item colot" @click="operate('+')">+</div>
            <div class="calculator-item colot" @click="operate('-')">-</div>
         
       
          </div>

          <div class="calculator-row-3">
          <div class="calculator-item" @click="operate(4)">4</div>
          <div class="calculator-item" @click="operate(5)">5</div>
          <div class="calculator-item" @click="operate(6)">6</div>
          <div class="calculator-item colot" @click="operate('*')">X</div>
           <div class="calculator-item colot" @click="operate('/')">%</div>
      
          </div>
                
          <div class="calculator-row-4">
          <div class="calculator-item" @click="operate(1)">1</div>
          <div class="calculator-item" @click="operate(2)">2</div>
          <div class="calculator-item" @click="operate(3)">3</div>
           <div class="calculator-item colot" @click="devided()">x²</div>
           <div class="calculator-item colot" @click="square()">√</div>
    
          </div>
                
          <div class="calculator-row-5">
          <div class="calculator-item" @click="operate(0)" style="flex:3">0</div>
          <div class="calculator-item" @click="operate('.')" style="flex:1">.</div>
          <div class="calculator-item color" @click="equal()" style="flex:3">=</div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  name: 'CalculatorContent',
  data () {
    return {
     formula :"",
     result : 0 
    }
  },

  methods:{
    operate(element){
      console.log("operate..");
      this.formula +=element;
      // console.log("this.formula:");
      // console.log(this.formula);
    },

    equal(){
      console.log("equal..");
      this.result = eval(this.formula)||0;
      // console.log("this.formula:");
      // console.log(this.formula);
    },

    cleanResult(){
      console.log("cleanResult..");
      this.result = 0;
    },

    cleanAll(){
      console.log("cleanAll..");
      this.formula = "";
      this.result = 0;
    },

    drop(){
        console.log("drop..");
        this.formula = this.formula.slice(0, -1);
    },

    square(){
        console.log("square..");
        console.log(eval(this.formula));
        eval(this.formula)<0? this.formula = "Can not suqre the negative value" : this.result=Math.sqrt(eval(this.formula));
   },

   devided(){
        console.log("devided.."); 
        this.formula===""||this.formula.endsWith("+"||"-"||"*"||"/"||"%")? {} :  this.formula="1/("+this.formula+")";this.equal();
   },

   toggle(){
        console.log("toggle.."); 


        this.formula===""||this.formula.endsWith("+"||"-"||"*"||"/"||"%")? {} :  this.formula.startsWith("-")?this.formula = Math.abs(eval(this.formula)).toString(): this.formula="-("+this.formula+")";
        this.equal();
   }

 }
}
</script>

<style scoped>
  .calculator-border{
      border: 1px solid #ebebeb;
      background-color: #f8f8f8;
    padding: 10px 5px;
    border-radius: 3px;
      width:80%;
      box-shadow: 1px 1px 1px 1px rgb(126, 126, 126);
  }
  .calculator-display{
    background-color: white;
    height: 35px;
    text-align: right;
    border-radius: 2px;
  }

  .calculator-row-1,.calculator-row-2,.calculator-row-3,.calculator-row-4,.calculator-row-5{
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
  }
  .calculator-item{
    background-color: #f2f2f2;
    padding: 5px 4px;
    flex: 1;
    color: black;
    border: 1px solid #ededed;
    margin: 5px;
    text-align: center;
    border-radius: 2px;
     box-shadow: 1px 1px 1px  rgb(88, 88, 88);
  }
  .color{
    color:#fe97b3;
  }
  .colot{
    color:#14bf;
  }
</style>